<template>
  <div class="home">
        <div class="home-slide">
            <cube-slide :data="bannars"/>
        </div>
        <div class="commend-header">
            <img src="../assets/commend.png" alt="commond">
            <span>今日推荐</span>
        </div>
        <div class="commend-list">
            <div class="commend-item" v-for="item in commendList" :key="item.id" @click="goTarget(item)">
                <div class="item-logo">
                    <img v-show="item.logo" :src="item.logo" alt="logo">
                    <div v-show="!item.logo" class="v-image">{{item.name.substr(0,1)}}</div>
                </div>
                <div class="item-desc">
                    <p>{{item.name}}</p>
                    <div>
                        <span>
                            {{item.key1}}{{item.key2 ? '|'+ item.key2: ''}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <Tabbar/>
  </div>
</template>

<script>
import { Slide } from 'cube-ui'
import Tabbar from '@/components/Tabbar.vue'


export default {
    name: 'home',
    components: {
        Slide,
        Tabbar
    },
    data() {
        return {
            bannars: [],
            commendList: []
        }
    },
    computed: {
        userId () {
            return this.$store.state.userId
        }
    },
    mounted() {
        this.$http.get('/getBannerList').then((response) => {
            let data = [].concat(response.data);
            this.bannars = data.sort((a, b) => b.sort - a.sort);
        })

        this.$http.get('/getTodayList').then((response) => {
            let data = [].concat(response.data);
            this.commendList = data.sort((a, b) => b.sort - a.sort);
        })
    },
    methods:{
        goTarget(item) {
            window.location.href = item.url;
        }
    }
}
</script>

<style scoped>
    .home{
        padding: 12px;
        padding-bottom: 80px;
    }
    .cube-slide{
        border-radius: 5px;
    }
    .commend-header{
        margin-top:12px;
    }
    .commend-header img{
        width:20px;
        vertical-align: top;
    }
    .commend-header span{
        font-size:17px;
        font-weight: bold;
        margin-left:5px;
    }
    .commend-list{
        display: flex;
        flex-wrap: wrap;
        margin-top:12px;
        background-color: #fff;
        border-radius:5px;
    }
    .commend-item{
        width: 50%;
        padding: 10px 10px;
        display:flex;
    }
    .commend-item .v-image{
        width:38px;
        height:38px;
        border-radius: 5px;
        line-height: 38px;
        text-align: center;
        display:inline-block;
        background-color: #1976D2;
        color:white;
        font-size:20px;
        font-weight: bold;
    }
    .commend-item img{
        width:38px;
        height:38px;
    }
    .item-desc{
        margin-left:5px;
        width: calc(100% - 38px);
    }
    .item-desc p{
        font-size:14px;
        margin-top:2px;
        font-weight: bold;
    }
    .item-desc>div{
        position: relative;
        margin-top:10px;
    }
    .item-desc span{
        display: inline-block;
    }

</style>

